Responsive Retina-Friendly Menu

//  The function to change the class
var changeClass = function (r,className1,className2) {
	var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
	if( regex.test(r.className) ) {
		r.className = r.className.replace(regex,' '+className2+' ');
    }
    else{
		r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
    }
    return r.className;
};	

//  Creating our button in JS for smaller screens
var menuElements = document.getElementById('menu');
menuElements.insertAdjacentHTML('afterBegin','  Menu');
//  Toggle the class on click to show / hide the menu
	document.getElementById('menutoggle').onclick = function() {
	changeClass(this, 'navtoogle active', 'navtoogle');
}

// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/comment-page-2/#comment-438918
document.onclick = function(e) {
	var mobileButton = document.getElementById('menutoggle'),
		buttonStyle =  mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;
		if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
			changeClass(mobileButton, 'navtoogle active', 'navtoogle');
		}
}
			

<div class="main clearfix">
	<nav id="menu" class="nav">					
		<ul>
			<li>
				<a href="#">
					<span class="icon">
						<i aria-hidden="true" class="icon-home"></i>
					</span>
					<span>Home</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="icon"> 
						<i aria-hidden="true" class="icon-services"></i>
					</span>
					<span>Services</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="icon">
						<i aria-hidden="true" class="icon-portfolio"></i>
					</span>
					<span>Portfolio</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="icon">
						<i aria-hidden="true" class="icon-blog"></i>
					</span>
					<span>Blog</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="icon">
						<i aria-hidden="true" class="icon-team"></i>
					</span>
					<span>The team</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="icon">
						<i aria-hidden="true" class="icon-contact"></i>
					</span>
					<span>Contact</span>
				</a>
			</li>
		</ul>
	</nav>
</div>